<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
        }
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            /* flex-direction 定义弹性盒的主轴方向 也就是内部弹性项的排列方向 默认值是row也就是横向排列
             column 设置主轴方向为纵向
             row-reverse 横向反向排列
             column-reverse 纵向反向排列
             */
            flex-direction: row;
            /* height: 800px; */
            /* 定义弹性项在主轴方向的对齐方式 
                默认值：flex-start左对齐
                flex-end右对齐
                space-between两边对齐中间留白
                space-around 弹性盒两边的空白是弹性项中间的一半
            */
            justify-content: space-between;
            /* 主轴的交叉轴上的对齐方式 */
            /* stretch拉伸 baseline一行文字的文字底部对齐 也叫基线对齐 */
            /* align-items: baseline; */
            /* height: 800px; */
            /* flex-wrap定义弹性项的换行方式 默认值是nowrap表示不换行 */
            /* flex-wrap: wrap; */
            /* 有多根轴线时定义在主轴的交叉轴方向的对齐方式 */
            /* align-content: space-around; */
        }

        li{
            /* 弹性项在主轴方向上的扩展距离 */
            flex-basis: 30%; 
            height: 100px;
            /* line-height: 40px; */
            background-color: red;
            /* margin-top: 10px; */
            color: #fff;
            font-weight: bold;
            text-align: center;
            flex-grow: 0;
            /* flex-shrink定义弹性项的缩小比例 */
            flex-shrink: 0;
        }
        /* span{
            background-color: blue;
        } */
        .item1 {
            background-color: green;
            /* flex-shrink: 2; */
        }
        .item3{
            /* font-size: 100px; */
            /* flex-grow定义弹性项的放大比例 */
            /* flex-grow: 2; */
            background-color: blue;
            /* flex-basis: 60%; */
            order: -1;
        }
        .item4{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <!-- <span>1</span>
    <span>2</span> -->
    <ul>
        <li class="item1">item1</li>
        <li>item2</li>
        <li class="item3">item3</li>
        <li class="item4">item4</li>
        <li>item5</li>
        <!-- <li>item1</li>
        <li>item2</li>
        <li class="item3">item3</li>
        <li>item4</li>
        <li>item5</li> -->
    </ul>
</body>
</html>